import React,  { Component } from 'react';
import './table.css';

class Table extends Component{
    state = {
        deleteAllChecked: false,
        hover: "",
        char_num_per_cells: [20, 40, 60, 80, 100, 200, 400, 600, 800, 1000],
        char_num_per_cell: 20,
        num_per_page: [10, 20, 50, 100],
        query_from_pos: 0,
        query_per_page: 10,
        show_query_from_pos: 0,
        show_query_per_page: 10,
        query_to_pos: 0,
        delete_list: [],
    }
    selectData = (id, event) => {
        let tmp_data = [...this.props.data]
        let delete_id = []
        for(let i = 0; i < tmp_data.length; i++) {
            if(id === tmp_data[i].id) {
                tmp_data[i].checked = event.target.checked
            }
        }
        let true_m = 0
        for(let i = 0; i < tmp_data.length; i++) {
            if(true === tmp_data[i].checked) {
                true_m += 1
                delete_id.push(tmp_data[i].id)
            }
        }
        let flag = true_m === tmp_data.length ? true : false
        this.setState({
            deleteAllChecked: flag,
            delete_list: delete_id,
        })
    }
    batch_delete = () => {
        this.props.deleteData(this.state.delete_list)
    }
    modify_data = (data) => {
        if(undefined !== this.props.modifyData){
            this.props.modifyData(data)
        }
    }
    selectAllData = (event) => {
        let tmp_data = [...this.props.data]
        let delete_id = []
        for(let i = 0; i < tmp_data.length; i++) {
            tmp_data[i].checked = event.target.checked
            if(event.target.checked){
                delete_id.push(tmp_data[i].id)
            }
        }
        this.setState({
            deleteAllChecked: event.target.checked,
            delete_list: delete_id,
        })
    }
    queryData = (from, page) => {
        this.props.queryData(from, page)
        this.setState({
            query_from_pos: from,
            query_per_page: page,
            show_query_from_pos: from,
            show_query_per_page: page,
        })
    }
    isInt = (input) => {
      var reg = /^[1-9]+[0-9]*$/
      return reg.test(input) ? true : false
    }
    queryButton = () => {
      this.queryData(this.state.query_from_pos, this.state.query_per_page)
    }
    queryNextPage = () => {
      this.queryData(this.state.query_from_pos + this.state.query_per_page, this.state.query_per_page)
    }
    queryLastPage = () => {
      this.queryData(
        this.props.recordCount - (this.props.recordCount % this.state.query_per_page),
        this.state.query_per_page)
    }
    queryBeforePage = () => {
      this.queryData(this.state.query_from_pos - this.state.query_per_page, this.state.query_per_page)
    }
    queryFirstPage = () => {
      this.queryData(0, this.state.query_per_page)
    }
    query_to_pos = () => {
      this.queryData(this.state.query_to_pos, this.state.query_per_page)
    }
    set_query_to_pos = (e) => {
      if("" !== e.target.value && !this.isInt(e.target.value)){
        alert("请输入正整数")
        e.target.value = ""
        return
      }
      if("" === e.target.value){
        this.setState({
          query_to_pos: 0
        })
        return
      }
      let to_page = parseInt(e.target.value)
      let to_pos = (to_page - 1) * this.state.query_per_page
      if(to_pos < 0 || to_pos > this.state.record_count){
        alert("输入页数不在数据范围内")
        e.target.value = ""
        return
      }
      this.setState({
        query_to_pos: to_pos
      })
    }
    set_query_per_page = (e) => {
      this.setState({
        query_from_pos: 0,
        query_per_page: parseInt(e.target.value),
      })
    }
    set_char_num_per_cell = (e) => {
        this.setState({
            char_num_per_cell: parseInt(e.target.value),
        })
    }
    handleMouseOver = (id) => {
        this.setState({
            hover: id
        })
    }
    handleMouseOut = () => {
        this.setState({
            hover: "",
        })
    }
    componentWillReceiveProps(nextProps){
        if(nextProps.restartQuery){
            this.setState({
                query_from_pos: 0,
                query_per_page: 10,
                show_query_from_pos: 0,
                show_query_per_page: 10,
            })
        }
    }
    render() {
        var id_count = 0;
        var no = this.state.show_query_from_pos;
        var { head, data } = this.props;
        var thead = head.map(h => {
            id_count += 1
            return (
                <th className={'thStyle'} key = {id_count}>{ h.ch }</th>
            )
        })

        var tbody =data.map(d => {
            id_count += 1
            no += 1
            return (
                <tr
                    className={
                        undefined !== d.checked && true === d.checked ?
                        'trDelStyle' :
                            d.id === this.state.hover ? 'trHoverStyle' :'trStyle'}
                    key = {id_count}
                    onMouseOver={() => this.handleMouseOver(d.id)} >
                    <td className={'tdStyle'}>
                        { undefined !== this.props.deleteData ?
                            <input
                                type='checkbox'
                                id={d.id} onChange = {(e) => this.selectData(d.id, e)}
                                checked={undefined === d.checked ? false : d.checked} /> :
                                <span></span>}
                        <span>{no}</span>
                    </td>
                    {head.map(h => {
                        id_count += 1;
                        let data_td = d[h.en];
                        data_td = data_td === null ? "" : data_td;
                        return (
                            <td className={'tdStyle'} key = {id_count} onClick={() => this.modify_data(d)}>
                                {data_td.length > this.state.char_num_per_cell ?
                                    data_td.substring(0, this.state.char_num_per_cell) + "..." :
                                    data_td}
                            </td>
                        )
                    })}
                </tr>
            )
        })

        var num_count = this.props.recordCount + ""
        if(undefined !== this.props.recordHits && -1 !== this.props.recordHits){
            if(this.props.recordHits > 1000) {
                num_count = "1000+"
            }
        }
        var show_query_from_pos = this.state.show_query_from_pos
        var show_query_per_page = this.state.show_query_per_page
        var cur_scroll_page_num = Math.ceil(show_query_from_pos / show_query_per_page) + 1
        var count_scroll_page_num = Math.ceil(num_count / show_query_per_page)
        var scroll_page_info1 = "共" + num_count + "个记录"
        var scroll_page_info2 = "第" + cur_scroll_page_num + "/" + count_scroll_page_num + "页(共" + num_count + ")"
        var scroll_page_info = undefined === this.props.queryData ? scroll_page_info1 : scroll_page_info2

        return (
            <div align="center">
                <table>
                <tbody>
                <tr>
                <td>
                { undefined === this.props.queryData ?
                    <div></div> :
                    <select value={this.state.char_num_per_cell} onChange={this.set_char_num_per_cell}>
                      { this.state.char_num_per_cells.map(n => {
                        return <option value={n} key={n}>{n} 字符/单元格</option>
                      })}
                    </select>}
                </td>
                <td>
                { undefined === this.props.queryData ?
                    <div></div> :
                    <select value={this.state.query_per_page} onChange={this.set_query_per_page}>
                      { this.state.num_per_page.map(n => {
                        return <option value={n} key={n}>{n} 条/页</option>
                      })}
                    </select>}
                </td>
                <td>
                { undefined === this.props.queryData ?
                    <div></div> :
                    <button onClick={this.queryButton}>查询</button>}
                </td>
                </tr>
                </tbody>
                </table>
                <table>
                <tbody>
                { 0 !== this.props.data.length ?
                <tr>
                <td>{ 1 !== cur_scroll_page_num ?
                    <button onClick={this.queryFirstPage}>首页</button> : <div></div> }</td>
                <td>{ 1 !== cur_scroll_page_num ?
                    <button onClick={this.queryBeforePage}>上一页</button> : <div></div> }</td>
                <td>
                    <font>{scroll_page_info}</font>
                </td>
                <td>{ cur_scroll_page_num !== count_scroll_page_num ?
                    <button onClick={this.queryNextPage}>下一页</button> : <div></div> }</td>
                <td>{ cur_scroll_page_num !== count_scroll_page_num && this.props.recordHits === this.props.recordCount ?
                    <button onClick={this.queryLastPage}>尾页</button> : <div></div> }</td>
                </tr> : <tr></tr>}
                </tbody>
                </table>
                <table>
                <tbody>
                { 0 !== this.props.data.length &&
                0 === this.state.record_count &&
                this.state.record_count > this.state.query_per_page * 5 ?
                <tr>
                <td><input onChange={this.set_query_to_pos} type="text" size="1" maxLength="3"></input></td>
                <td><button onClick={this.query_to_pos}>跳转</button></td>
                </tr> : <tr></tr>}
                <tr>
                <td>{0 !== this.state.delete_list.length ?
                    <button onClick={this.batch_delete}>批量删除</button> : <div></div>}</td>
                </tr>
                </tbody>
                </table>
                <table className={'tableStyle'}>
                    <thead>
                        <tr className={'trStyle'}>
                            <th className={'thStyle'}>
                                { undefined !== this.props.deleteData ?
                                    <input
                                        type='checkbox'
                                        onChange = {this.selectAllData}
                                        checked={this.state.deleteAllChecked} /> :
                                        <span></span>}
                                <span>no.</span>
                            </th>
                            { thead }
                        </tr>
                    </thead>
                    <tbody onMouseOut={this.handleMouseOut}>
                        { tbody }
                    </tbody>
                </table>
            </div>
        )
    }
}

export default Table;
